<template>
  <div class="learnIndex">
      <div class="Statusanswer" :class="{'showCard':showCard}">
          <div class="Statuscontent">
              <div class="StatusbigBox">
                  <div class="StatusbigBox2">
                      <!--@click="go1(index)"-->
                      <!--:key="index"-->
                      <!--:class="answer(item.option)?'Statusadd':''"-->
                      <div
                              class="Statusbox"
                              v-for="(item,index) in data&&data.subject"
                              @click="go1(index)"
                              :key="index"
                              :class="{'Statusadd':index==defaultIndex}"
                      >{{index+1}}</div>
                  </div>
              </div>
                <!--@click="go"-->
              <div class="Statusbtn" @click="go">继续答题</div>
          </div>
      </div>
    <div class="top">
      <i @click="answerStatus" class="iconfont iconkaoshi_timu_icon"></i>
    </div>

    <div class="progress">
      <div class="progress1">
        <div :style="{width:(~~no+1)/data.test_info.question_num*100 +'%'}"></div>
      </div>

      <div class="topic">第{{~~no+1}}/{{data.test_info.question_num}}题</div>
    </div>
    <div class="content">
        <div class="contentInner">
            <p class="title">{{~~no+1}}.{{subject.question_type | question_type}}</p>
            <p class="topic1" v-html="subject.title"></p>

            <p
                    v-for="(item,index) of subject.option"
                    class="select"
                    :class="item.answer?'red':''"
                    :key="item.id"
                    @click="answer(item,~~no)"
            >{{index+1 | az}}.{{item.title}}</p>
        </div>
      <div class="btn" v-if="!selected">{{submit}}</div>
      <div class="btn2" v-if="selected" @click="next">{{submit}}</div>
      <div class="time">
        <i class="iconfont iconkaoshi_dati_time"></i>
        <span>{{ time | time}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [],
      showCard:false,
      defaultIndex:-1,
      data: JSON.parse(localStorage.getItem("subject")),
      subject: {},
      no: 0,
      temp:[],
      fraction: true,
      selected: false,
      answerC: [],
      id: [],
      submit: "确定",
      time: "",
      idItem: [],
      isOver:false
    };
  },

  mounted() {
    this.$progress.done();
    console.log(this.data)
    if(!this.data){
        this.getSubject();
    }

    this.init();
    this.no = this.$route.query.index || 0;
    this.isOver =this.$route.query.isOver;
    console.log(this.isOver)
    // this.data.subject[this.no].option.forEach(e => {
    //   if (e.answer == true) {
    //     this.selected = true;
    //     return;
    //   }
    // });
  },
  // beforeRouteLeave(to, from, next) {
  //   if (to.path != "/learn/answerStatus") {
  //     localStorage.removeItem("answerC");
  //     localStorage.removeItem("idItem");
  //   }
  //   next();
  // },
  filters: {
    time: function(e) {
      var h = Math.floor(e / 3600);
      var m = Math.floor(e / 60) % 60;
      var s = Math.floor(e % 60);
      return (
        h.toString().padStart(2, "0") +
        ":" +
        m.toString().padStart(2, "0") +
        ":" +
        s.toString().padStart(2, "0")
      );
    },
    question_type: function(e) {
      if (e == 1) {
        return "单选题";
      }
      if (e == 2) {
        return "多选题";
      }
      if (e == 3) {
        return "判断题";
      }
      if (e == 4) {
        return "不定项选择题";
      }
    },
    az: function(num) {
      var s = "";
      while (num > 0) {
        var m = num % 26;
        if (m === 0) m = 26;
        s = (m + 9).toString(36) + s;
        num = (num - m) / 26;
      }
      return s.toUpperCase();
    }
  },

  methods: {
      getSubject(){
          this.$http
              .get("/applets/Test/test_info", {
                  id: this.$route.query.id
              })
              .then(res => {
                  this.data = res.data;
                  localStorage.setItem("subject", JSON.stringify(res.data));
                  this.$progress.done();
              });
      },
      go(){
        this.showCard =false;
      },
      go1(index){
        this.defaultIndex=index;
        this.no =index;
          this.subject = this.data.subject[this.no];
          this.data.subject[this.no].option.forEach(e => {
              if (e.answer == true) {
                  this.selected = true;
                  return;
              }
          });
      },
    init() {
      this.$http
        .post("/applets/Test/start_question", {
          phone: JSON.parse(Cookies.get('user_71ydj')).phone,
          exam_scene_id: this.$route.query.id
        })
        .then(res => {
          this.data = JSON.parse(JSON.stringify(this.data));
          this.subject = this.data.subject[this.no];
          console.log(this.data)
          console.log(this.subject)
          console.log(this.data)
          console.log(this.subject)
          this.countdown();
        });
    },
    countdown() {
      this.time = this.data.test_info.duration;
      var set = setInterval(() => {
        this.time--;
        if (this.time === 0) {
          clearInterval(set);
          this.nextSubmit();
        }
      }, 1000);
    },
    nextSubmit() {
          for(var i=0;i<this.answerC.length;i++){
              console.log(this.answerC[i])
                if(!this.answerC[i]){
                    this.answerC[i]={
                        subject_id: this.data.subject[i].subject_id,
                        question_type:this.data.subject[i].question_type,
                        answer: []
                    }
                }
          };
          console.log(this.answerC)
          this.$http
                .post("/applets/Test/answer_complete", {
                      id: this.$route.query.id,
                      phone: JSON.parse(Cookies.get('user_71ydj')).phone,
                      answer:JSON.stringify(this.answerC)
                }).then(res => {
                  localStorage.setItem("grade", JSON.stringify(res.data));
                  this.$router.replace({
                    path: "/learn/testScore",
                    query: { id: this.$route.query.id,state:this.$route.query.state||false },

                  });
                  return;
                });
    },
    next() {
      //每答完一题 记录一次
      // this.idItem = JSON.parse(localStorage.getItem("idItem"));
      console.log(this.no)
      console.log(this.idItem)
      console.log(this.subject)
      this.id = this.idItem[this.no];
      console.log(this.id)
      // this.answerC = new Array(this.data.test_info.question_num);
      console.log(this.answerC)
      // localStorage.setItem("subject", JSON.stringify(this.data));
        if(this.subject.question_type == 2||this.subject.question_type == 4){
            this.answerC[this.no] = {
                subject_id: this.subject.subject_id,
                question_type: this.subject.question_type,
                answer: [...this.temp]
            };
        }else{
            this.answerC[this.no] = {
                subject_id: this.subject.subject_id,
                question_type: this.subject.question_type,
                answer: [...this.id]
            };
        }
      console.log(this.answerC);
      this.temp=[];
      // this.answerC = localStorage.setItem(
      //   "answerC",
      //   JSON.stringify(this.answerC)
      // );

      if (this.no == this.data.test_info.question_num - 2) {
        this.submit = "提交试卷";
      }
      if (this.no == this.data.test_info.question_num - 1) {
        this.nextSubmit();
        return;
      }
      this.id = [];
      this.selected = false;
      this.no = ~~this.no + 1;
      // localStorage.setItem("no", JSON.stringify(this.no));
      this.subject = this.data.subject[this.no];
      this.data.subject[this.no].option.forEach(e => {
        if (e.answer == true) {
          this.selected = true;
          return;
        }
      });
    },
    answer(item,index) {
      console.log(item)
      let currentQuestion =this.data.subject[index];
      this.idItem =new Array(this.data.test_info.question_num);
      this.id = this.idItem[this.no] || [];
        // console.log(currentQuestion)
        // console.log(this.idItem )
        // console.log(this.id)
      //单选题
      if (this.subject.question_type == 1||this.subject.question_type == 3) {
        // if (!this.selected) {
          currentQuestion.option.forEach((el,index)=>{
              el.answer =false;
          });
          item.answer = true;
          this.id.push(item.id);
          this.selected = true;
          this.idItem[this.no] = this.id;
          // localStorage.setItem("idItem", JSON.stringify(this.idItem));
          return;
        // }
        // return;
      }
      //多选题
      if (this.subject.question_type == 2||this.subject.question_type == 4) {
        //    多选题两次点击会取消当前答案
          console.log(item)
        if (!item.answer) {
          item.answer = true;
          this.temp.push(item.id);
          console.log(this.id)
          this.selected = true;
          this.idItem[this.no] = this.temp;
        }else{
            item.answer = false;
            currentQuestion.option.forEach((el,index)=>{
                this.id.forEach((el2,index2)=>{
                    if(el.id==el2.id){
                        this.temp.splice(index2,1)
                    }
                })
            })
        }
      }
      //判断题
      // if (this.subject.question_type == 3) {
      //   if (!this.selected) {
      //     item.answer = true;
      //     this.id.push(item.id);
      //     this.selected = true;
      //     this.idItem[this.no] = this.id;
      //     // localStorage.setItem("idItem", JSON.stringify(this.idItem));
      //     return;
      //   }
      //   return;
      // }

      // //不定项选择题
      // if (this.subject.question_type == 4) {
      //   if (!item.answer) {
      //     item.answer = true;
      //     this.id.push(item.id);
      //     this.selected = true;
      //     this.idItem[this.no] = this.id;
      //     // localStorage.setItem("idItem", JSON.stringify(this.idItem));
      //     return;
      //   }
      //   return;
      // }
    },

    answerStatus() {
        this.showCard =true;
      // this.$router.push({
      //   path: "/learn/answerStatus",
      //   query: {
      //     id: this.$route.query.id
      //   }
      // });
    }
  }
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

.greed {
  color: #74c282 !important;
}

.red {
  color: red !important;
}
.learnIndex {
  position: relative;
  background: url("~@as/img/kaoshi_beijing@2x.png");
  background-size: 100% 100%;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 0;
  overflow-y: scroll;

  .top {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  i {
    color: #fff;
    font-size: 20px;
    margin-top: 20px;
    margin-right: 20px;
  }

  .progress {
    margin-top: 15px;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;

    .progress1 {
      width: 249px;
      height: 5px;
      background: rgba(0, 0, 0, 0.08);
      margin-right: 15px;
      border-radius: 10px;
      div {
        height: 100%;
        background: #fff;
        width: 20px;
        border-radius: 10px;
      }
    }
    .topic {
      font-size: 12px;
      color: #fff;
    }
  }
  .btn {
    /*margin-top: 34px;*/
    width: 287px;
    height: 36px;
    background: #dddddd;
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    position: absolute;
    bottom: 15px;
    left: 50%;
    margin-left: -143.5px;
  }
  .btn2 {
    /*margin-top: 34px;*/
    width: 287px;
    height: 36px;
    background: #f47548;
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    position: absolute;
    bottom: 15px;
    left: 50%;
    margin-left: -143.5px;
  }
  .content {
    position: relative;
    width: 335px;
    height: calc( 100% - 130px );
    /*height: 510px;*/
    background: #fff;
    margin-top: 40px;
    border-radius: 4px;
    padding: 25px 18px 25px 18px;
    overflow-y: scroll;
    margin-bottom: 34px;
  }
    .contentInner{
        height: calc( 100% - 40px);
        /*background: red;*/
        overflow-y: scroll;
    }
  .title {
    font-size: 15px;
    color: #999;
  }

  .topic1 {
    font-size: 15px;
    margin-top: 25px;
    color: #333333;
    font-weight: bold;
  }
  .select {
    margin-top: 29px;
    font-size: 15px;
    color: #666;
    transition: all .1s;
  }
  .select + .select {
    margin-top: 20px;
  }

  .time {
    width: 86px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffb094;
    position: absolute;
    right: 0;
    top: 25px;
    border-radius: 20px 0 0 20px;
    i {
      margin: 0;
      margin-right: 8px;
      margin-left: 10px;
      color: #fff;
      font-size: 15px;
    }

    span {
      color: #fff;
      font-size: 12px;
    }
  }
}

.Statusanswer {
    position: absolute;
    left: 0;
    top: 0;
    background: url("~@as/img/xuexi_datizhuangkuang_bg@2x.png");
    background-size: 100% 100%;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 0;
    transform: translateX(-100vw);
    transition: all .5s;
    &.showCard{
        transform: translateX(0vw);
        z-index: 9999;
    }
    .Statusbtn {
        margin-top: 34px;
        width: 287px;
        height: 36px;
        background: #eb4d44;
        color: #fff;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;

        position: absolute;
        bottom: 35px;
        left: 50%;
        margin-left: -143.5px;
    }
    .Statuscontent {
        position: relative;
        width: 335px;
        height: 562px;
        background: #fff;
        margin-top: 82px;
        border-radius: 4px;
        padding: 20px 10px 20px 18px;
    }
    .StatusbigBox {
        width: 100%;
        display: flex;
        height: 450px;
        align-items: flex-start;
        overflow-y: scroll;
    }
    .StatusbigBox2 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .Statusbox {
        width: 30px;
        height: 30px;
        margin: 15px;
        font-size: 14px;
        color: #999999;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
    }

    .Statusadd {
        color: #666666;
        background: #ddd;
    }
}
</style>